{{extend './comment.html'}}

<!--  -->
{{block 'head'}}
<title>发布Blog</title>
<link rel="stylesheet" href="/public/css/post.css" />
{{/block}}

<!--  -->
{{block 'content'}}

<div class="main">
  <div class="title">
    <h1>
      分享我的所见所闻 <span><a href="/app">返回Blog</a> </span>
    </h1>
  </div>

  <div class="from">
    <form action="/post" method="post" autocomplete="off" id="post_form">
      <div class="form-group">
        <label for="exampleInputPassword1">Blog 标题</label>
        <input
          type="text"
          name="title"
          class="form-control"
          id="exampleInputPassword1"
          placeholder="添加Blog标题"
          value=""
        />
      </div>

      <div class="form-group">
        <label for="exampleInputPassword1">用户名</label>
        <input
          type="text"
          name="nickname"
          class="form-control"
          id="exampleInputPassword2"
          placeholder="用户名"
          maxlength="8"
          value=""
          required
        />
      </div>

      <div class="form-group">
        <label for="exampleInputPassword1">Blog 内容</label>
        <textarea
          name="message"
          id="message"
          cols="65"
          rows="12"
          value=""
        ></textarea>
      </div>

      <div class="time" style="display: none">
        <input
          type="text"
          name="dateTime"
          class="form-control"
          id="dateTime"
          value=""
        />
      </div>
      <button type="submit" class="btn btn-default">
        完成发布 <span></span>
      </button>
    </form>
  </div>
</div>

{{/block}}

<!--  -->
{{block 'script'}}

<script>
  var news = document.querySelector(".news");
  var index = document.querySelector(".index");
  news.className = "current";
  index.className = "";
</script>

<script>
  var message = document.querySelector("#message");
  var time = document.querySelector("#dateTime");
  //   设置dateTime
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;

  var dateTime = year + "-" + month + "-" + date;

  // 当message表单失去焦点时，就回去当前时间（有个bug：当用户停留在发表页面时，且失去焦点，再发送，就会造成时间不符）
  // 解决方法：解决提出问题的人（这是不对的），可以只显示到xx年xx月xx日
  message.onblur = function () {
    time.value = dateTime;
  };
</script>

<script src="../public/js/src/jQuery.js"></script>
<script>
  $("#post_form").on("submit", function (e) {
    e.preventDefault();
    var formData = $(this).serialize();
    console.log(formData);
    $.ajax({
      url: "/post",
      type: "POSt",
      data: formData,
      success: function (data) {
        var err_code = data.err_code;
        if (err_code === 500) {
          window.alert("网络异常,请检查网络状态");
        } else if (err_code === 0) {
          window.alert("发布成功");
          window.location.href = "/app";
        }
      },
    });
  });
</script>

{{/block}}
